<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-绘制一个柱状图</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    canvas {
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <Canvas width="800" height="450"></Canvas>
</body>
<script>
  // 获取DOM节点
  let canvas = document.querySelector('canvas')
  // 获取画布的笔【上下文】
  let ctx = canvas.getContext('2d')
  // 绘制文本--左上角的文本
  ctx.font = "20px 微软雅黑"
  ctx.fillText('数据可视化', 40, 50)
  // 绘制线段
  ctx.moveTo(100, 100)
  ctx.lineTo(100, 410)
  ctx.moveTo(80, 400)
  ctx.lineTo(700, 400)
  ctx.stroke()

  // 绘制其他的线段
  ctx.moveTo(100, 100)
  ctx.lineTo(700, 100)
  ctx.fillText('150', 60, 110)

  ctx.moveTo(100, 160)
  ctx.lineTo(700, 160)
  ctx.fillText('120', 60, 170)

  ctx.moveTo(100, 220)
  ctx.lineTo(700, 220)
  ctx.fillText('90', 60, 230)

  ctx.moveTo(100, 280)
  ctx.lineTo(700, 280)
  ctx.fillText('60', 60, 290)

  ctx.moveTo(100, 340)
  ctx.lineTo(700, 340)
  ctx.fillText('30', 60, 350)
  ctx.fillText('0', 60, 400)
  ctx.stroke()
  // 绘制水平轴底部的线段
  ctx.moveTo(250, 400)
  ctx.lineTo(250, 410)
  ctx.moveTo(400, 400)
  ctx.lineTo(400, 410)
  ctx.moveTo(550, 400)
  ctx.lineTo(550, 410)
  // 底部的文字
  ctx.fillText('食品', 160, 420)
  ctx.fillText('数码', 310, 420)
  ctx.fillText('服饰', 460, 420)
  ctx.fillText('箱包', 610, 420)
  ctx.stroke()

  // 矩形
  ctx.fillStyle = 'red'
  ctx.fillRect(130, 200, 100, 200)
  ctx.fillStyle = 'blue'
  ctx.fillRect(280, 150, 100, 250)
  ctx.fillStyle = 'purple'
  ctx.fillRect(430, 250, 100, 150)
  ctx.fillStyle = 'orange'
  ctx.fillRect(580, 230, 100, 170)
</script>

</html>